<template>
	<view class="pageview">
		<zx-nav title=" " noBack bg="transparent" color="#fff"></zx-nav>
		<view class="top-wrap"></view>
		<!-- 个人信息 -->
		<div class="userinfo u-flex-y-center">
			<u-avatar :size="100" :src="userInfo.avatar||'/static/avatar/avatar3.png'"></u-avatar>
			<view class="u-m-l-22 u-flex-sub">
				<view class="name">{{ userInfo.realName }}</view>
				<view class="account">{{ userInfo.username }}</view>
				<!-- <view class="account">{{ userInfo.username || '13720247591' }}</view> -->
			</view>
			<!-- <u-icon name="arrow-right"></u-icon> -->
		</div>
		<view class="cardbox">
			<u-grid :col="4" :border="false">
				<u-grid-item @tap="navTo(item.path)" v-for="(item, index) in showMenulist" :key="index" :customStyle="{ height: 160 + 'rpx' }">
					<view class="imgbox">
						<image :src="assetsPath + item.icon" class="png" mode="widthFix"></image>
					</view>
					<text class="grid-text">{{ item.name }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="menu cardbox">
			<view class="menu-item u-flex u-flex-between u-flex-y-center" v-for="(item, index) in menulist" :key="index" @tap="navTo(item.path)">
				<image :src="assetsPath + item.icon" mode="widthFix" class="icon"></image>
				<view class="flex-sub name">{{ item.name }}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import mixin from '@/common/mixin.js';
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
	mixins: [mixin],
	data() {
		return {
			curIndex: 0,
			menulist: [
				{
					name: '健康记录',
					icon: '/mine/icon5.png',
					path: ''
				},
				{
					name: '健康报告',
					icon: '/mine/icon6.png',
					path: '/pages/forgetpwd/forgetpwd'
				},
				{
					name: '使用指南',
					icon: '/mine/icon7.png',
					path: ''
				},
				{
					name: '设置',
					icon: '/mine/icon8.png',
					path: '/pages/setting/setting'
				}
			],
			gridlist: [
				{
					name: '设备',
					icon: '/mine/icon9.png',
					path: '/pages/devicelist/list'
				},
				{
					name: '管理成员',
					icon: '/mine/icon3.png',
					path: '/pages/account/account'
				},
				{
					name: '二维码名片',
					icon: '/mine/icon2.png',
					path: '/pages/forgetpwd/forgetpwd'
				},
				{
					name: '健康助手',
					icon: '/mine/icon4.png',
					path: '/pages/testAI/testAI'
				}
			]
		};
	},
	components: {},
	computed: {
		...mapState(['userInfo']),
		showMenulist() {
			return this.gridlist;
		}
	},
	onShow() {},

	methods: {
		...mapActions(['Logout']),
		...mapMutations(['$uStore']),
		navTo(path, type) {
			if (path) {
				this.$Router.push({
					path
				});
			}
		}
	}
};
</script>

<style lang="scss">
.pageview {
	height: 100vh;
	background: #f7f7fc;

	& > view {
		position: relative;
	}

	.top-wrap {
		background: linear-gradient(180deg, #e1faf7 0%, #f7f7fc 79%);
		position: absolute;
		left: 0;
		width: 100%;
		height: 750upx;
		top: 0;
	}

	.userinfo {
		color: #1c2023;
		font-size: 24upx;
		z-index: 999;
		margin: 50upx 30upx 0;
		position: relative;

		.name {
			font-size: 32upx;
			margin-right: 10upx;
			font-weight: 600;
		}

		.account {
			font-size: 28upx;
			margin-top: 10upx;
			color: #36374d;
		}
	}

	.cardbox {
		margin: 30upx;
		padding: 22upx 0;
		background: #fff;
		box-shadow: 0px 20upx 60upx rgba(0, 87, 84, 0.05);
		border-radius: 10upx;

		.imgbox {
			width: 92upx;
			height: 92upx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.grid-text {
			font-size: 28upx;
			font-weight: 400;
			line-height: 34px;
			color: #1b0a1c;
			// padding: 14rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}

		.num {
			display: inline-block;
			color: #fff;
			font-size: 24upx;
			background: #fb706c;
			border-radius: 20upx;
			padding: 0 14upx;
			height: 34upx;
			position: absolute;
			top: -10px;
			right: -10px;
		}
	}

	.menu {
		padding: 0 20rpx;

		.menu-item {
			padding: 32upx 0 32upx 12upx;
			font-size: 30upx;
			color: #1c2023;

			.icon {
				width: 40upx;
				height: 40upx;
				display: block;
				margin-right: 16upx;
			}

			& + .menu-item {
				border-top: 1px solid #e3e4e5;
			}
		}
	}
}
</style>
